import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {ListItem, ListInfo, ListDesc, LoadMore} from '../style';
import * as actionCreators from '../../../actions/HomeAction';

class List extends Component {
    render() {
        const {articleList, getMoreList} = this.props;
        return (
            <div>
                {
                    articleList.map((item) => {
                        return (
                            <ListItem key={item.get('id')}>
                                <Link className="list-pic" to={'/detail/' + item.get('id')}>
                                    <img src={item.get('imgUrl')} alt="default" />
                                </Link>
                                <div className="content">
                                    <ListInfo>
                                        <Link to={'/detail/' + item.get('id')}>{item.get('title')}</Link>
                                        <p>{item.get('desc')}</p>
                                    </ListInfo>
                                    <ListDesc>
                                        <span className="diamond mr-10">
                                            <i className="iconfont icondiamond"></i>
                                            {item.get('diamond')}
                                        </span>
                                        <a className="nickname mr-10" href="/">{item.get('nickname')}</a>
                                        <a className="comment mr-10" href="/">
                                            <i className="iconfont iconmessage"></i>
                                            {item.get('comment')}
                                        </a>
                                        <span className="star">
                                            <i className="iconfont iconheart"></i>
                                            {item.get('heart')}
                                        </span>
                                    </ListDesc>
                                </div>
                            </ListItem>
                        )
                    })
                }
                <LoadMore onClick={getMoreList}>阅读更多</LoadMore>
            </div>
        )
    }

    componentDidMount() {
        // this.props.getArticleList();
    }

}

const mapStateToProps = (state) => {
    return {
        articleList: state.getIn(['home', 'articleList'])
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        // getArticleList() {
        //     dispatch(actionCreators.getArticleList())
        // }

        getMoreList() {
            dispatch(actionCreators.getMoreList())
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(List);